<template>
  <div class="dialog-wrap" v-if="isShow">
    <div class="content">
      <div class="input">
        <input type="text" v-model="url" placeholder="请输入网址..." :disabled="isSubmit">
      </div>
      <div class="btns">
        <button @click="add()">添加</button>
        <button @click="cancel()">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>

import { inject, ref } from 'vue';
import useWebsStore from '@/store'
const url = ref('')
const { isShow, setIsShow } = inject('dialog-visible')
const websStore = useWebsStore();
const reg = /^(http|https):\/\/[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/\S*)?$/
// 确定添加
const add = async () => {
  // 正则校验---------------start
  if (!reg.test(url.value)) {
    myApi.alertMsg('请输入有效网址...')
    return
  }


  // console.log(url.value, '22');
  // 向主进程传递url地址，然后后台打开网址截图，保存信息返回给渲染进程。将数据存入store 然后持久化。
  // 最后渲染列表展示。
  const res = await window.myApi.sendUrl(url.value)
  // console.log(res, 'res');
  if (res.msg) {
    // 如果存在 -->> 弹出报错  --->渲染进程触发主进程---> 生成弹窗提示。
    myApi.alertMsg(res.msg)
  } else {
    // 将数据存入 store 持久化。
    websStore.addWebs(res)
  }
  // 关闭弹窗
  cancel()

}
// 取消
const cancel = () => {
  setIsShow(false);
  url.value = '';
}
</script>

<style lang="stylus" scoped>
.dialog-wrap
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0, 0.8)
  display flex
  justify-content center
  align-items center
  z-index 1000
  .content
    width 100%
    padding 0 20px
    input
      height 30px
      width 100%
      outline none
      margin-bottom 10px
      font-size 12px
    .btns
      button
        height 30px
        margin-right 10px
        font-size 12px
        padding 0 20px
</style>